<template>
  <!-- 统计图表 -->
  <div ref="myChart" id="myChart"></div>

</template>
<script>
import * as echarts from 'echarts'
export default {
  components: {},
  props: {
    datas: {
      type: Array,
      default: () => { }
    },
    obj: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      myChart: null
    };
  },
  computed: {},
  watch: {
    datas: {
      handler() {
        this.init();
      },
      deep: true
    }
  },
  mounted() {
    const that = this;
    that.init();
    window.onresize = () => {
      that.myChart.resize();
    }

  },
  methods: {
    init() {
      const option = {
        // 调整内边距，让图表离左边有一定距离
        grid: {
          left: '15%',
          top: '18%',    // 减少顶部留白，设置为5%
          bottom: '18%', // 减少底部留白，设置为5%
        },
        // x轴
        xAxis: {
          data: ['仓库', '岛柜仓库'],
          axisLine: {
            lineStyle: {
              color: '#fff' // 设置x轴轴线颜色为白色
            }
          },
          // x轴刻度
          axisTick: {
            show: false
          },
          // x轴标签
          axisLabel: {
            color: '#fff',
            // x轴名称折行，两行展示
            formatter: function (value) {
              return value.split('').reduce((result, char, index) => {
                if (index % 2 === 0 && index > 0) {
                  result += '\n';
                }
                return result + char;
             }, '');
            }
          }
        },
        yAxis: {
          // 设置y轴单位
          name: '单位：个',
          // 将单位放在y轴顶部
          axisLabel: {
            color: '#fff',
          },
          // 去掉y轴横向线
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff' // 设置x轴轴线颜色为白色
            }
          },
          // 去掉y轴网格线
          splitLine: {
            show: false
          }
        },
        series: [{
          name: '数量',
          type: 'line',
          data: [30, 207],
          barWidth: 15, // 设置柱子宽度为15，可根据需要调整此数值
          // 柱子标签
          label: {
            show: true, // 开启显示标签
            position: 'top', // 标签位置在柱子顶部
            color: '#fff', // 标签文字颜色为白色
            formatter: '{c}' // 显示数据值，{c} 表示数据值
          }
        }]
      };
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart);
      }
      // 绘制图表
      this.myChart.setOption(option)
    }

  }
};
</script>
<style lang="sess" scoped>
</style>